<style lang="less">
@import '../../../styles/common.less';
</style>
<template>
  <Card style="height:900px">
    <Layout>
      <Card>
        <header>
          <span style="vertical-align:middle">资金方:</span>
          <Select v-model="fundCode" class="v-select-wrapper" style="width:150px">
            <Option v-for="item in fundList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <span style="vertical-align:middle;margin-left: 10px;">产品:</span>
          <Select v-model="productCode" class="v-select-wrapper" style="width:150px">
            <Option v-for="item in productList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <span style="vertical-align:middle;margin-left: 10px;">交易时间:</span>
          <Date-picker type="date" v-model="startDate" format="yyyy年MM月dd日" style="width:150px"></Date-picker>-
          <Date-picker type="date" v-model="endDate" placement="bottom-end" format="yyyy年MM月dd日" style="width:150px"></Date-picker>
          <span style="vertical-align:middle;margin-left: 10px;">客户姓名:</span>
          <Input v-model="custName" style="width:150px" />
          <span style="vertical-align:middle;margin-left: 10px;">身份证:</span>
          <Input v-model="custCardNo" style="width:150px" />
          <span style="vertical-align:middle;margin-left: 10px;">状态:</span>
          <Select v-model="status" class="v-select-wrapper" style="width:150px">
            <Option v-for="item in paymentStatusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <Button type="primary" @click="query" style="margin-left: 10px;">查询</Button>
        </header>
      </Card>
      <Card>
        <Table border :columns="orderColumns" :data="data1" style="width: 100%;"></Table>
        <div style="margin-top: 36px;text-align: center;">
          <Page :total="totalNum" :current="currentPage" :page-size="pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
        </div>
      </Card>
    </Layout>
  </Card>
</template>

<script>
export default {
  name: 'mutative-router',
  data () {
    return {
      custName: '',
      custCardNo: '',
      startDate: null,
      endDate: null,
      status: '',
      productCode: '',
      fundCode: '',
      totalNum: 0,
      currentPage: 1,
      pageSize: 10,
      productList: [],

      fundList: [],
      amountAct: 0,
      paymentStatusList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '0',
          label: '申请成功'
        },
        {
          value: '1',
          label: '申请失败'
        },
        {
          value: '2',
          label: '申请处理中'
        },
        {
          value: '3',
          label: '代扣失败'
        },
        {
          value: '4',
          label: '代扣处理中'
        },
        {
          value: '5',
          label: '代扣成功'
        }
      ],

      orderColumns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: 50,
          className: 'tbake'
        },
        {
          title: '资金方',
          key: 'fundName',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '产品',
          key: 'productName',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '客户姓名',
          key: 'custName',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '身份证号',
          key: 'custCardNo',
          align: 'center',
          width: 150,
          className: 'tbake'
        },
        {
          title: '合同金额',
          key: 'loanAmount',
          align: 'center',
          width: 100,
          className: 'tbake'
        },
        {
          title: '保险费费率',
          key: 'securityRate',
          width: 130,
          className: 'tbake',
          align: 'center'
        },
        {
          title: '保险费金额',
          key: 'securityFee',
          width: 130,
          className: 'tbake',
          align: 'center'
        },
        {
          title: '交易时间',
          key: 'paymentDate',
          align: 'center',
          width: 150,
          className: 'tbake',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.formatTime(params.row.paymentDate))
            ])
          }
        },
        {
          title: '代扣金额',
          key: 'securityFee',
          align: 'center',
          width: 100,
          className: 'tbake'
        },
        {
          title: '成功金额',
          key: 'aviAmount',
          align: 'center',
          width: 100,
          className: 'tbake'
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          width: 100,
          className: 'tbake'
        },
        // {
        //   title: '状态',
        //   key: 'status',
        //   align: 'center',
        //   width: 100,
        //   className: 'tbake',
        //   render: (h, params) => {
        //     if (params.row.status === '0') {
        //       return h('div', {
        //       }, '申请成功')
        //     } else if (params.row.status === '1') {
        //       return h('div', {
        //       }, '申请失败')
        //     } else if (params.row.status === '2') {
        //       return h('div', {
        //       }, '申请处理中')
        //     } else if (params.row.status === '3') {
        //       return h('div', {
        //       }, '代扣失效')
        //     } else if (params.row.status === '4') {
        //       return h('div', {
        //       }, '代扣处理中')
        //     } else if (params.row.status === '5') {
        //       return h('div', {
        //       }, '代扣成功')
        //     }
        //   }
        // },
        {
          title: '失败原因',
          key: 'reason',
          align: 'center',
          width: 150,
          className: 'tbake'
        },
        {
          title: '扣款订单号',
          key: 'requestNo',
          align: 'center',
          width: 160,
          className: 'tbake'
        }
      ],
      data1: []
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },
  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.currentPage = pageNum
      vm.queryDetail()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.pageSize = pageLength
      vm.queryDetail()
    },
    query () {
      var vm = this
      if (vm.startDate > vm.endDate && vm.endDate !== '') {
        this.$Message.warning('开始日期不能大于结束日期')
        return
      }
      this.queryDetail()
    },
    monthGather () {
      var vm = this
      vm.turnOut = true
    },
    queryDetail () {
      var vm = this
      this.$ajax
        .post(
          this.$appContext.marvels_core_financial +
          'financial/mcfe/service/querySecurityWithholding',
          {
            productCode: vm.productCode,
            fundCode: vm.fundCode,
            startDate: vm.startDate,
            endDate: vm.endDate,
            custName: vm.custName,
            custCardNo: vm.custCardNo,
            status: vm.status,
            currentPage: vm.currentPage,
            pageSize: vm.pageSize
          }
        )
        .then(re => {
          this.data1 = re.data.data.list
          this.totalNum = re.data.data.total
        })
        .catch(er => { })
    }
  },
  created () {
    this.$ajax = this.$util.ajax()
    var vm = this
    var tmpDate = new Date()
    var tmpEndDate = new Date()
    tmpEndDate.setDate(tmpEndDate.getDate() + 1)
    vm.endDate = tmpEndDate
    tmpDate.setMonth(tmpDate.getMonth() - 1)
    vm.startDate = tmpDate
    this.queryDetail()
    // 查询资金源
    vm.fundList.push({
      value: '',
      label: '请选择'
    })
    this.$ajax
      .post(
        this.$appContext.marvels_core_financial + 'financial/fund/service/list',
        {}
      )
      .then(re => {
        var allData = re.data.data

        for (var i = 0; i < allData.length; i++) {
          vm.fundList.push({
            value: allData[i].fundCode,
            label: allData[i].fundName
          })
        }
      })
      .catch(er => { })
    // 查询产品小类
    vm.productList.push({
      value: '',
      label: '请选择'
    })
    this.$ajax
      .post(
        this.$appContext.marvels_core_product +
        'product/mcpt/service/searchByVersion',
        {}
      )
      .then(re => {
        var allData = re.data.data
        for (var i = 0; i < allData.length; i++) {
          vm.productList.push({
            value: allData[i].productCode,
            label: allData[i].productName
          })
        }
      })
      .catch(er => { })
  }
}
</script>
<style lang="less">
.tbake .ivu-table-cell{
  padding-left: 2px;
  padding-right: 2px;
}
</style>
